<template>
  <div class="dashboard-container">
    <!-- 页头 -->
    <MyHeader />

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 顶部分布信息 -->
      <div class="distribution-section">
        <h2>京剧剧目分布图</h2>
        <div class="distribution-map">
          <div ref="worldMap" class="world-map"></div>
        </div>
        <div class="chart-container">
          <div class="chart-item">
            <h3>剧目类型占比</h3>
            <div ref="pieChart" class="chart"></div>
          </div>
          <div class="chart-item">
            <h3>观众画像</h3>
            <div ref="barChart" class="chart"></div>
          </div>
        </div>
      </div>

      <!-- 实时数据 -->
      <div class="real-time-section">
        <h2>实时数据</h2>
        <div class="data-item">
          <span>观看总人数：</span>
          <span>{{ totalUsers }}</span>
        </div>
        <div class="data-item">
          <span>本月观看人数：</span>
          <span>{{ monthlyViews }} 人</span>
        </div>
        <div class="data-item">
          <span>今日活跃观众：</span>
          <span>{{ activeUsers }}</span>
        </div>
      </div>

      <!-- 城市分布 -->
      <div class="city-distribution-section">
        <h2>城市分布</h2>
        <div class="chart-container">
          <div class="chart-item">
            <h3>城市分布饼图</h3>
            <div ref="pieCityChart" class="chart"></div>
          </div>
          <div class="chart-item">
            <h3>各城市观看人数</h3>
            <div ref="stackedBarChart" class="chart"></div>
          </div>
        </div>
      </div>

      <!-- 城市排名 -->
      <div class="city-ranking-section">
        <h2>城市排名</h2>
        <table class="city-ranking-table">
          <thead>
            <tr>
              <th>城市</th>
              <th>人数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(city, index) in topCities" :key="index">
              <td>{{ city.name }}</td>
              <td>{{ city.value }}（人）</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 京剧动态 -->
      <div class="dynamics-section">
        <h2>京剧动态</h2>
        <div class="chart-container">
          <div class="chart-item">
            <h3>每日观看人数趋势</h3>
            <div ref="lineChart" class="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import MyHeader from './MyHeader.vue';

export default {
  components: {
    MyHeader,
  },
  setup() {
    const pieChart = ref(null);
    const barChart = ref(null);
    const worldMap = ref(null);
    const pieCityChart = ref(null);
    const stackedBarChart = ref(null);
    const lineChart = ref(null);

    const totalUsers = ref(50000);
    const monthlyViews = ref(30000);
    const activeUsers = ref(12000);
    const topCities = ref([
      { name: '上海', value: 12000 },
      { name: '北京', value: 10000 },
      { name: '深圳', value: 8000 },
      { name: '成都', value: 7000 },
      { name: '广州', value: 6000 },
    ]);

    onMounted(() => {
      initCharts();
    });

    const initCharts = () => {
      // 剧目类型分布
      const pieInstance = echarts.init(pieChart.value);
      pieInstance.setOption({
        title: {
          text: '剧目类型占比',
          left: 'center',
          top: 20,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        series: [
          {
            name: '剧目类型',
            type: 'pie',
            radius: [75, 100],
            center: ['50%', '60%'],
            data: [
              { value: 20000, name: '传统戏' },
              { value: 15000, name: '现代戏' },
              { value: 10000, name: '新编戏' },
              { value: 5000, name: '儿童戏' },
            ],
            animation: true,
          },
        ],
      });

      // 观众画像
      const barInstance = echarts.init(barChart.value);
      barInstance.setOption({
        title: {
          text: '观众画像',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          top: 'bottom',
          data: ['男性', '女性'],
        },
        xAxis: {
          type: 'category',
          data: ['10-20岁', '20-30岁', '30-40岁', '40岁以上'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '男性',
            type: 'bar',
            data: [2000, 3000, 2500, 1500],
            color: '#3399FF',
          },
          {
            name: '女性',
            type: 'bar',
            data: [1500, 2500, 2000, 1000],
            color: '#FF9999',
          },
        ],
      });

      // 世界地图分布
      const worldMapInstance = echarts.init(worldMap.value);
      worldMapInstance.setOption({
        title: {
          text: '京剧全球分布',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        toolbox: {
          feature: {
            saveImage: {},
          },
        },
        series: [
          {
            type: 'scatter',
            coordSys: 'geo',
            name: '全球分布',
            symbol: 'circle',
            symbolSize: 1,
            data: Array.from({ length: 500 }, () => ({
              longitude: Math.random() * 360 - 180,
              latitude: Math.random() * 180 - 90,
            })),
            itemStyle: {
              color: '#00ffff',
            },
          },
        ],
      });

      // 城市分布饼图
      const pieCityInstance = echarts.init(pieCityChart.value);
      pieCityInstance.setOption({
        title: {
          text: '城市分布',
          left: 'center',
          top: 20,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        series: [
          {
            name: '城市分布',
            type: 'pie',
            radius: [75, 100],
            center: ['50%', '60%'],
            data: [
              { value: 12000, name: '上海' },
              { value: 10000, name: '北京' },
              { value: 8000, name: '深圳' },
              { value: 7000, name: '成都' },
              { value: 6000, name: '广州' },
            ],
            animation: true,
          },
        ],
      });

      // 城市观看人数堆叠柱状图
      const stackedBarInstance = echarts.init(stackedBarChart.value);
      stackedBarInstance.setOption({
        title: {
          text: '各城市观看人数',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          data: ['2020年', '2021年'],
        },
        xAxis: {
          type: 'category',
          data: ['上海', '北京', '深圳', '成都', '广州'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '2020年',
            type: 'bar',
            stack: '总额',
            label: {
              show: true,
              position: 'insideRight',
            },
            data: [8000, 7000, 5000, 4000, 3000],
            color: '#FF9999',
          },
          {
            name: '2021年',
            type: 'bar',
            stack: '总额',
            label: {
              show: true,
              position: 'insideRight',
            },
            data: [4000, 3000, 3000, 3000, 3000],
            color: '#3399FF',
          },
        ],
      });

      // 每日观看人数趋势线图
      const lineInstance = echarts.init(lineChart.value);
      lineInstance.setOption({
        title: {
          text: '每日观看人数趋势',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '每日观看人数',
            type: 'line',
            stack: '总量',
            data: [120, 232, 101, 264, 224, 200, 132, 101, 30, 120, 232, 101],
          },
        ],
      });
    };

    return {
      pieChart,
      barChart,
      worldMap,
      pieCityChart,
      stackedBarChart,
      lineChart,
      totalUsers,
      monthlyViews,
      activeUsers,
      topCities,
    };
  },
};
</script>

<style scoped>
.dashboard-container {
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  flex-direction: column;
}

.distribution-section,
.real-time-section,
.city-distribution-section,
.city-ranking-section,
.dynamics-section {
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.distribution-map {
  width: 100%;
  height: 300px;
}

.chart-container {
  display: flex;
  justify-content: space-between;
}

.chart-item {
  flex: 1;
  margin: 0 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.chart {
  height: 300px;
}

.real-time-section .data-item {
  margin: 10px 0;
  font-size: 18px;
}

.city-ranking-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.city-ranking-table th,
.city-ranking-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
